<template>
	<view>
		<view class="time-header">
			Today
		</view>
		
		<scroll-view :scroll-y="true" class="scroll-t" :style="{height: scrollT+'px'}">
			<view class="time-cloum" v-for="(t, i) in list" :key="i">
				<text class="time-clock">{{t.start}}</text>
				<view class="time-content">
					<view class="todo-content">
						<view class="todo-topic">
							{{t.topic}}
						</view>
						<view class="todo-desc">
							{{t.sub}}
						</view>
						<i class="iconfont icon icon-menu-pl" style="font-size: 48rpx;" />
					</view>
				</view>
			</view>
			<view style="height: 100px;content: ' ';" />
		</scroll-view>
		
	
	
		
	</view>
</template>

<script>
	export default {
		name:"time-line",
		data() {
			return {
				scrollT: 400,
				list: [
					{
						topic: 'Meeting with the Dev',
						sub: '3 point to be discussed',
						start: '10:00 AM',
						end: '11:00'
					},
					{
						topic: 'Wireframes review',
						sub: 'For create user story',
						start: '13:00 PM',
						end: '14:00'
					},
					{
						topic: 'Meeting with UI team',
						sub: 'To be successful time management',
						start: '15:00 PM',
						end: '16:00'
					}
				]
			}
		},
		created() {
			uni.getSystemInfo({
				success: (e) => {
					const { screenHeight, safeArea, statusBarHeight } = e
					let rect = wx.getMenuButtonBoundingClientRect()
					let CustomBar = 0
					if (e.system.toLowerCase().indexOf('ios') > -1) {  
					    CustomBar = rect.bottom + (rect.top - statusBarHeight) * 2
					} else {  
					    CustomBar = statusBarHeight + rect.height + (rect.top - statusBarHeight) * 2
					}
					this.scrollT = 35+screenHeight-(CustomBar+uni.upx2px(42+50)+uni.upx2px(140)+uni.upx2px(120)+uni.upx2px(190))
				}
			})
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
.time-header {
	padding: 20rpx;
	line-height: 80rpx;
}

.scroll-t {
	min-height: 400px;
}
.time-cloum {
	display: flex;
	justify-content: center;
	padding: 10rpx 0;
	
	.time-clock {
		width: 120rpx;
		line-height: 32rpx;
		font-size: 20rpx;
		color: rgba(23, 23, 23, 0.7);
	}
	
	.time-content {
		width: calc(100% - 220rpx);
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 24rpx;
		margin-top: 14rpx;
		border-top: solid 4rpx #dde4ef;
	}
	
}
.todo-content {
	width: 500rpx;
	height: 140rpx;
	background-color: #f0f3f6;
	box-shadow: 6rpx 6rpx 12rpx 0rpx #dde4ef, -6rpx -6rpx 12rpx -3rpx #FFF;
	border-radius: 30rpx;
	padding: 32rpx;
	margin-bottom: 20rpx;
	.todo-topic {
		font-size: 28rpx;
		line-height: 38rpx;
		color: #171717;
	}
	.todo-desc {
		font-size: 24rpx;
		line-height: 32rpx;
		color: rgba(23, 23, 23, 0.6);
	}
	.icon-menu-pl {
		position: absolute;
		right: 80rpx;
		margin-top: -80rpx;
		color: #7727ff;
	}
}
</style>
